<template>
  <div class="badge-demo">
    <h3 class="title">基本</h3>
    <div>
      <d-button-group size="s">
        <d-button icon="d-icon-plus" @click="count++"></d-button>
        <d-button icon="d-icon-minus" @click="count <=0 || count--"></d-button>
      </d-button-group>
      <i class="d-split"></i>
      <d-badge :count="count">
        <div class="text-center">消息</div>
      </d-badge>
    </div>
    <h3 class="title">最大显示数</h3>
    <div>
      <d-badge :count="100" :max-count="99">
        <div class="text-center">消息</div>
      </d-badge>
      <i class="d-split" v-width="40"></i>
      <d-badge :count="1000" :max-count="999">
        <div class="text-center">消息</div>
      </d-badge>
    </div>
    <h3 class="title">数字为0的时候也显示</h3>
    <div>
      <d-badge :count="0" :show-zero="true">
        <div class="text-center">消息</div>
      </d-badge>
    </div>
    <h3 class="title">提示小红点</h3>
    <div>
      <d-badge :count="1" :dot="true">消息</d-badge>
      <i class="d-split" v-width="20"></i>
      <d-badge :count="1" :dot="true">
        <d-button size="s">消息</d-button>
      </d-badge>
    </div>
    <h3 class="title">不同展示方式</h3>
    <div v-width="200">
      <div style="position:relative;padding:5px;">
        <span>Menu1</span>
        <d-badge :count="20" position="right"></d-badge>
      </div>
      <div style="position:relative;padding:5px;">
        <span>Menu2</span>
        <d-badge :count="100" :max-count="99" position="right"></d-badge>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'badgeDemo',
  data () {
    return {
      count: 2
    }
  }
}
</script>

<style lang="stylus" scoped>
// .badge-demo
</style>
